<template>
  <div class="score-add addButton">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>教务管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/studentInfo/subjectScore/list' }">成绩管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加成绩</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="form">
      <el-form ref="form" :model="form" label-width="120px" size="small" :rules="rules">
        <el-form-item label="班级:" prop="classId">
          <el-select v-model="form.classId" clearable placeholder="请选择班级" style="width:230px" @change="classChange">
            <el-option
              v-for="item in classList"
              :key="item.classId"
              :label="item.className"
              :value="item.classId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生:" prop="studentId">
          <el-select v-model="form.studentId" clearable placeholder="请选择学生" style="width:230px" @change="studentChange">
            <el-option
              v-for="item in studentList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择考季:" prop="season">
          <el-select v-model="form.season" clearable placeholder="请选择考季" style="width:230px" @change="seasonChange">
            <el-option
              v-for="item in seasonList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择科目:" prop="subject">
          <el-select v-model="form.subject" clearable placeholder="请选择科目" style="width:230px" @change="subjectChange">
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试课程名称:" prop="examName">
          <el-select v-model="form.examName" clearable placeholder="选择考试课程名称" style="width:230px">
            <el-option
              v-for="item in examNameList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成绩:" prop="score">
          <el-input-number v-model="form.score"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button style="background:#ff8b00;color:#fff" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        classId: "", //班级id
        season: "", //考试所属考季id
        subject: "", //考试所属科目id
        studentId: "", //学生id
        examName: "", //所属考试id
        score: "",   //得分
      },
      rules: {
        season: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        classId: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        subject: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        examName: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        studentId: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        score: [
          { required: true, message: "不能为空", trigger: "change" }
        ]
      },
      classList: [],
      subjectList: [],
      seasonList: [],
      examNameList: [],
      studentList: [],
      tempArr: []
    };
  },
  mounted() {
    this.obtainMyOwnExamList();
  },
  methods: {
    classChange(classId) {
      this.studentList = [];
      this.subjectList = [];
      this.seasonList = [];
      this.examNameList = [];
      this.studentList = [];
      this.tempArr = [];
      this.form.studentId = "";
      this.form.season = "";//考试所属考季id
      this.form.subject = "";//考试所属科目id
      this.form.studentId = "";//学生id
      this.form.examName = "";//所属考试id
      this.studentList = this.classList.find(e => {
        return e.classId === classId;
      }).examList;
    },
    studentChange(studentId) {

      let tempArr = [];
      for (const item of this.studentList) {
        if (studentId === item.userId) {
          tempArr = item.examList;
          break;
        }
      }
      if (this.tempArr.length === 0) {
        this.tempArr = tempArr;
        console.log(1111);
      }
      let seasonMap = new Map();
      for (const temp of tempArr) {
        if (!seasonMap.get(temp.examinationSeason)) {
          seasonMap.set(temp.examinationSeason, {
            id: temp.examinationSeason,
            name: temp.examinationSeasonName
          });
        }
      }
      this.seasonList = Array.from(seasonMap.values()).map((e) => {
        return {
          id: e.id,
          name: e.name
        };
      });
      console.log(this.seasonList);

    },
    seasonChange(seasonId) {
      this.form.subject = "";
      this.subjectList = [];
      this.form.examName = "";
      this.examNameList = [];
      let subjectMap = new Map();
      for (const temp of this.tempArr) {
        if (temp.examinationSeason === seasonId) {
          if (!subjectMap.get(temp.examinationSubject)) {
            subjectMap.set(temp.examinationSubject, {
              id: temp.examinationSubject,
              name: temp.examinationSubjectName
            });
          }
        }
      }
      this.subjectList = Array.from(subjectMap.values()).map((e) => {
        console.log("e", e);
        return {
          id: e.id,
          name: e.name
        };
      });
    },
    subjectChange(subjectId) {
      this.form.examName = "";
      this.examNameList = [];
      let examNameMap = new Map();
      for (const temp of this.tempArr) {
        // examinationId: 7
        // examinationName: "测试语文考试2"
        // examinationSeason: 3
        // examinationSeasonName: "2021考季"
        // examinationSubject: 2
        // examinationSubjectName: "语文"
        if (temp.examinationSubject === subjectId) {
          if (!examNameMap.get(temp.examinationId)) {
            examNameMap.set(temp.examinationId, {
              id: temp.examinationId,
              name: temp.examinationName
            });
          }
        }
      }
      this.examNameList = Array.from(examNameMap.values()).map((e) => {
        console.log("e", e);
        return {
          id: e.id,
          name: e.name
        };
      });
    },

    obtainMyOwnExamList() {
      this.$api.studentInfo.obtainMyOwnExamList({})
        .then((res) => {
          console.log(res);
          this.classList = res.data;
        });
    },
    onSubmit() {
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {
            studentId: this.form.studentId, //学生id
            season: this.form.season, //考试所属考季id
            subject: this.form.subject, //考试所属科目id
            examination: this.form.examName, //所属考试id
            score: this.form.score //得分
          };
          this.$api.studentInfo.gradeStudents(params)
            .then((res) => {
              this.$message.success("打分成功");
            });
        }
      });
    }
  },
};
</script>

<style scoped>
.score-add {
  padding: 30px;
}

.score-add .form {
  max-width: 700px;
  margin: 30px 0px;
}

</style>
